import * as React from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
import {testApi} from '../../api/modules/user';
import {p} from '../../utils/pxToDp';
import {Tabs} from '@fruits-chain/react-native-xiaoshu';

export default () => {
  const test = async () => {
    const res = await testApi();
    console.log('res', res);
  };
  return (
    <View style={{flex: 1, backgroundColor: '#eee'}}>
      <View style={styles.topBackground}></View>

      <View style={styles.userInfoLayout}>
        <View style={styles.topLayout}>
          <Image
            style={styles.userImage}
            source={{
              uri: 'http://120.26.171.36/upload/common/logo.png',
            }}></Image>
          <View style={styles.rightTotal}>
            <View style={styles.item}>
              <Text style={styles.numText}>12</Text>
              <Text style={styles.labelText}>文章</Text>
            </View>
            <View style={styles.item}>
              <Text style={styles.numText}>2</Text>
              <Text style={styles.labelText}>关注</Text>
            </View>
            <View style={styles.item}>
              <Text style={styles.numText}>62</Text>
              <Text style={styles.labelText}>粉丝</Text>
            </View>
          </View>
        </View>

        <View style={styles.bottomLayout}>
          <Text style={styles.userName}>Howie166</Text>
          <Text style={styles.userEmail}>howie166@163.com</Text>
        </View>
      </View>

      <Tabs tabBarStyle={{backgroundColor: 'transparent'}}>
        <Tabs.TabPane key="1" tab="文章">
          <Text>1</Text>
        </Tabs.TabPane>

        <Tabs.TabPane key="2" tab="收藏">
          <Text>2</Text>
        </Tabs.TabPane>
      </Tabs>
    </View>
  );
};

const styles = StyleSheet.create({
  topBackground: {
    height: p(180),
    backgroundColor: '#5ea7c8',
  },
  userInfoLayout: {
    height: p(120),
  },
  topLayout: {
    marginHorizontal: p(20),
    marginTop: p(-30),
    flexDirection: 'row',
    alignItems: 'flex-end',
  },
  userImage: {
    width: p(80),
    height: p(80),
    marginRight: p(30),
    backgroundColor: '#ccc',
    borderRadius: p(40),
  },
  rightTotal: {
    flexDirection: 'row',
  },
  item: {
    alignItems: 'center',
    width: p(72),
  },
  labelText: {
    color: '#000',
    fontSize: p(12),
  },
  numText: {
    color: '#000',
    fontSize: p(16),
  },

  userName: {
    marginBottom: 2,
    color: '#000',
    fontWeight: 'bold',
    fontSize: p(18),
  },
  userEmail: {
    color: '#666',
    fontSize: p(12),
  },

  bottomLayout: {
    marginTop: 12,
    marginHorizontal: p(20),
  },
});
